import React, {Component} from 'react';

// 导入组件
import {Carousel} from 'antd-mobile';
import './TheCarousel.scss'
import axios from "axios";
import {Link} from "react-router-dom";
import http from "../util/http";

class TheCarousel extends Component {
    constructor(props) {
        super(props);
        this.state={
            HomeBannerList: ["1","2","3"],
            isBannerLoad:false,
            imgHeight: 120,
        }
    }
    componentDidMount() {
        // 获取轮播图列表

        http.get(`${this.props.movieapi}`).then(({data}) => {
            if (data.code === 200) {
                if (data.code === 200) {
                    const HomeBannerList = data.data.list
                    this.setState({
                        isBannerLoad:true,
                        HomeBannerList: HomeBannerList
                    })
                }
            } else {
                alert(data.msg)
            }
        })

    }
    // 渲染轮播图广告结构
    renderHomeBannerList() {
        return this.state.HomeBannerList.map(item => (
            <Link
                key={item.bannerId}
                to={"/news"}
                style={{
                    display: 'inline-block',
                    width: '100%',
                    height: 120
                }}
            >
                <img
                    src={ process.env.REACT_APP_BASE_API+"/img/"+item.src}
                    alt={item.name}
                    style={{width: '100%', height: "120px", verticalAlign: 'top'}}
                />
            </Link>
        ))
    }




    render() {
        return (
            <div className={"home-carousel"}>
                {
                    this.state.isBannerLoad?<Carousel
                        autoplay={true}
                        autoplayInteritem={2000}
                        infinite
                    >
                        {this.renderHomeBannerList()}
                    </Carousel>:<></>
                }
            </div>
        );
    }
}
export default TheCarousel;
